<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>


.bgc{
	background-color:pink;
}
li{
	cursor: pointer;
}

	</style>
</head>
<body>
	<ul id="ul"> 
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

	<script>

var ulObj = document.getElementById('ul')
var olObj = ulObj.children



for(var i=0;i<olObj.length;i++){
	olObj[i].onmouseenter = function(){
		// this.style.backgroundColor = "red"
		this.className = 'bgc'
	}
	olObj[i].onmouseleave = function(){
		// this.style.backgroundColor = "#fff"
		this.className = ''
	}
}

	</script>
</body>
</html>